<!-- 员工已核销列表页 -->
<template>
  <view v-if="shenheStatus == 0" class="page-list">
    <view class="list-total">
      <text>{{ $t('mdAdmin.clerkOrder') }}：</text>
      <text>{{ row_count }} </text>
    </view>
    <!-- 列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in listData" :key="index">
        <view class="order-num">
          {{ $t('clerk.orderNum') }}：{{ item.order_no }}
        </view>
        <view class="order-goods">
          <goodsDetail :orderitem="item"></goodsDetail>
        </view>
        <view class="split-line"></view>
        <view class="order-time"
          >{{ $t('mdAdmin.clerkTime') }}：{{ item.clerk_time }}</view
        >
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import singleGoods from '../components/singleGoods/index.vue';
import goodsDetail from '../components/goodsDetail/index.vue';
export default {
  components: { singleGoods, goodsDetail, Shenhe },
  data() {
    return {
      page: 1,
      pageSize: 20,
      row_count: 0,
      staffId: 0,
      listData: [],
    };
  },
  onLoad(t) {
    if (t?.id) {
      this.staffId = t.id;
      this.getListData({ id: this.staffId, page: this.page });
    }
  },
  onReachBottom() {
    if (this.page * this.pageSize >= this.row_count) return;
    this.page++;
    this.getMemberList({ id: this.staffId, page: this.page, loadMore: true });
  },
  computed: {},
  onShow() {},
  watch: {},
  methods: {
    getListData(params) {
      this.$allrequest.mdAdmin.staffClerkList(params).then(res => {
        if (!res.code) {
          res.data.list.forEach(d => {
            d.goods_list.forEach(k => {
              k.attr = JSON.parse(k.attr);
            });
          });
          if (params.loadMore) {
            this.listData = [...this.listData, ...res.data.list];
          } else {
            this.listData = res.data.list;
          }
          this.row_count = res.data.row_count;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-list {
  width: 100%;
  min-height: 100vh;
  background: #f2f2f2;
  .list-total {
    width: 100%;
    height: 84rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    text {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
    text:nth-child(2) {
      color: #f0250e;
    }
  }
  .order-list {
    width: 100%;
    padding-top: 24rpx;
    .order-item {
      width: 100%;
      margin-bottom: 24rpx;
      padding: 30rpx 0 24rpx 30rpx;
      background-color: #ffffff;
      .order-num {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .order-goods {
        width: 100%;
        padding: 30rpx 24rpx 30rpx 0;
      }
      .split-line {
        width: 100%;
        height: 1px;
        background: #f8f8f8;
      }
      .order-time {
        padding-top: 24rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
  }
}
</style>
